<template>
  <div id="app">
    <div class="box">
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="loginForm"
        label-width="100px"
        class="demo-ruleForm"
        inline
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            prefix-icon="iconfont icon-user"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            placeholder="请输入密码"
            prefix-icon="iconfont icon-3702mima"
            type="password"
          ></el-input>
        </el-form-item>

        <el-form-item class="btn">
          <el-button type="primary" @click="login('loginForm')">登录</el-button>
          <el-button type="info"  @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="logo">
        <img src="../assets/logo.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  // 组件注册
  components: {},
  // 父组件传参
  props: {},
  // 变量声明
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  // Vue实例创建完成以后执行 数据可用
  created() {},
  // Vue模板挂载完毕以后执行  DOM节点加载完毕了（可以获取节点了）
  mounted() {},
  // keepalive 缓存进入执行
  activited() {},
  // vue组件更新完毕以后执行
  update() {},
  // 定义事件
  methods: {
    login(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          // alert("submit!");
        let { data:res } = await this.$axios.post("login",this.loginForm);
        console.log(res)
        if(res.meta.status == 200){
          this.$message.success(res.meta.msg)
          sessionStorage.setItem("token",res.data.token)
          this.$router.push("/home")
        }else{
          this.$message.error(res.meta.msg)
        }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(){
       this.$refs.loginForm.resetFields();
    }
  },
  // 过滤器
  filter: {},
  // 计算属性
  computed: {},
  // 监听属性
  watch: {},
};
</script>

<style scoped>
.box {
  width: 400px;
  height: 300px;
  /* margin: 0 auto; */
  padding: 20px;
  border: 1px solid #888;
  box-shadow: 0 0 10px #888;
  position: relative;
  background: #fff;
  transform: translate(150%, 100%);
  border-radius: 4px;
}

.btn {
  margin: 20px 0 0 250px;
}
.el-form-item:nth-child(1) {
  margin-top: 80px;
}
.el-input {
  width: 400px;
}
.logo {
  width: 140px;
  height: 140px;
  border: 1px solid #888;
  box-shadow: 0 0 10px #888;
  border-radius: 50%;
  position: absolute;
  top: -110px;
  left: 32%;
  padding: 10px;
  z-index: 10;
  background: #fff;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #eee;
}
html,
body,
#app {
  height: 100%;
  background: #2b4b6b;
}
</style>
